<template>
    <div class="play-page" :class="{ show: isShowPlayPage }">
        <div class="playBg"></div>
        <div class="play-content">
            <div class="play-nav">
                <div class="p-close" @click="setIsShowPlayPage(false)">
                    <img class="auto-img" src="../../public/images/playpage/向下.png" alt="">
                </div>
                <div class="select_see">
                    <div>推荐</div>
                    <div class="active">歌曲</div>
                    <div>歌词</div>
                </div>
                <div class="goShare">
                    <img class="auto-img" src="../../public/images/playpage/分享.png" alt="">
                </div>
            </div>

            <div class="move">
                <div class="img2">
                    <img class="auto-img" src="../../public/images/home/20170219121202_4wAjr.jpeg" alt="">
                </div>
            </div>
            <div class="playMsg">
                <div class="name-like">
                    <div class="songName">在你的身边</div>
                    <div class="like_Num">
                        <div class="like">
                            <img class="auto-img" src="../../public/images/playpage/爱心.png" alt="">
                        </div>
                        <div class="likeNum">111万+</div>
                    </div>
                </div>
                <div class="singerName">
                    <div>生者</div>
                    <div class="interest">关注</div>
                    <div>收听6w人</div>
                    <div>是否有视频</div>
                </div>
                <div class="songWords">1111111</div>
                <div class="sing-more">
                    <div class="moreImg">
                        <img class="auto-img" src="../../public/images/playpage/话筒.png" alt="">
                    </div>
                    <div class="moreImg">
                        <img class="auto-img" src="../../public/images/playpage/214声波、语音消息.png" alt="">
                    </div>
                    <div class="moreImg">
                        <img class="auto-img" src="../../public/images/playpage/218下载、导入.png" alt="">
                    </div>
                    <div class="moreImg">
                        <img class="auto-img" src="../../public/images/playpage/评价.png" alt="">
                    </div>
                    <div class="moreImg">
                        <img class="auto-img" src="../../public/images/playpage/Android更多.png" alt="">
                    </div>
                </div>
                <div class="progress">
                    <van-slider v-model="dragValue" @change="onChange" />
                </div>
                <div class="time">
                    <div class="timeLeft">00:00</div>
                    <div class="timeRight">00:00</div>
                </div>
                <div class="play-puase">
                    <div class="playTwo">
                        <img class="auto-img" src="../../public/images/playpage/24gl-shuffle.png" alt="">
                    </div>
                    <div class="play_pre_next">
                        <img class="auto-img" src="../../public/images/playpage/上一首.png" alt="">
                    </div>
                    <div class="play-pause">
                        <img class="auto-img" src="../../public/images/playpage/播放2.png" alt="">
                    </div>
                    <div class="play_pre_next">
                        <img class="auto-img" src="../../public/images/playpage/下一首 (1).png" alt="">
                    </div>
                    <div class="playTwo">
                        <img class="auto-img" src="../../public/images/playpage/歌单.png" alt="">
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
  
<script>

import { mapState, mapMutations, mapGetters } from 'vuex';


export default {
    name: 'PlayPage',

    data() {
        return {
            //拖动进度条的值
            dragValue: 0,

            //显示隐播放列表
            show: false
        };
    },

    components: {
        // ListItem
    },

    created() {

    },

    computed: {
        ...mapState(['isShowPlayPage', 'isPlay', 'currentAudioInfo', '$audio', 'progressWidth', 'duration', 'currentTime', 'currentLyric', 'top', 'songLycActiveIndex', 'lyricHeight', 'initTop', 'playList', 'playMode']),
        ...mapGetters(['formatDuration', 'formatCurrentTime']),


    },

    methods: {
        ...mapMutations(['setIsShowPlayPage', 'setAudioPlayStatus', 'setProgressWidth', 'setIsDragProgress', 'setCurrentTime', 'setTop', 'setLyricHeight', 'setInitTop', 'setIsChange', 'setSongLycActiveIndex', 'setAudioId', 'setPlayMode']),
        onChange(value) {

            //   
        },

    }
}
</script>
  
<style lang="less" scoped>
.play-page {
    color: #b2b1b7;
    background-color: white;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transform-origin: right bottom;
    transform: rotate(90deg);
    overflow: hidden;
    transition: transform .4s ease-out;

    &.show {
        transform: rotate(0deg);
    }

    .playBg {
        filter: blur(5px);
        width: 100%;
        height: 100%;
        background: url(../../public/images/home/20170219121202_4wAjr.jpeg) no-repeat center center;
        background-size: 100% 100%;
    }

    .play-content {
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        z-index: 2;

        .play-nav {
            width: 90%;
            margin: 10px 5% 10px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .p-close {
                width: 25px;
                height: 25px;
            }

            .select_see {
                width: 40%;
                display: flex;
                justify-content: space-between;

                .active {
                    color: #fff;
                }
            }

            .goShare {
                width: 25px;
                height: 25px;
            }


        }

        .move {
            margin-top: 50px;
            margin-left: 15%;
            width: 300px;
            height: 300px;


            .img2 {
                width: 250px;
                height: 250px;
                overflow: hidden;
                border-radius: 50%;
                // opacity: 0.8;
            }
        }

        .playMsg {
            // margin-top: 330px;

            .name-like {
                margin: 10px 5%;
                align-items: center;
                width: 90%;
                display: flex;
                justify-content: space-between;

                .songName {
                    color: #fff;
                    font-size: 18px;
                    font-weight: bold;
                }

                .like_Num {
                    position: relative;
                    display: flex;
                    font-size: 5px;

                    .like {
                        width: 25px;
                        height: 25px;
                    }
                }

            }

            .singerName {
                width: 60%;
                margin: 0px 25% 10px 5%;
                display: flex;
                justify-content: space-between;

                .interest {
                    text-align: center;
                    border: 1px solid #848194;
                    padding: 0px 2px;
                    border-radius: 10px;
                }
            }

            .songWords {
                width: 70%;
                margin: 0px 20% 30px 5%;
            }
        }

        .sing-more {
            width: 90%;
            margin: 10px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .moreImg {
                width: 25px;
                height: 25px;
            }
        }

        .progress{
        width: 90%;
        margin: 30px 5% 0px 5%;

        /deep/.van-slider__button {
            width: 10px;
            height: 10px;
        }

    }

    .time {
        width: 90%;
        margin: 10px 5% 0px 5%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .play-puase{
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin: 20px 5%;
        .playTwo{
            width: 25px;
            height: 25px;
        }
        .play_pre_next{
            width: 30px;
        }
        .play-pause{
            width: 35px;
        }
    }

}





}
</style>